<template>
  <div>
    <div class="comment-wrapper">
      <img width="50px" height="50px" :src="imgSrc">
      <div class="discuss">
          <vue-markdown :source="item && item.content"></vue-markdown>
          <div class="icon-block">
              <my-icon icon="ios-person-outline" size="15">{{ item && item.username }}</my-icon>
              <div style="margin-left:10px">{{  item && creatTime }}</div>
          </div> 
      </div>
    </div>
  </div>
</template>

<script>
import { getRelativeTimeString } from "@/utils/time";
import VueMarkdown from 'vue-markdown';
import { domain } from '@/utils/host';
export default {
  components:{ VueMarkdown },
  props: ['item'],
  computed:{
    imgSrc(){
        return `${domain}/fdl/preImages/${this.item.headImg}`
    },
    creatTime(){
        return getRelativeTimeString(this.item.createTime / 1000)
    }
  },
}
</script>

<style lang="scss" scoped>
  .comment-wrapper{
      display: flex;
      align-items: center;
      padding: 20px 0;
      margin:0 40px;
      img{
        width:50px;
        height: 50px;
        display: inline-block;
        border-radius: 50%;
      }
      .discuss{
        flex:1;
        margin-left:20px;
        p{
          font-size:18px;
          font-weight:bold;
          color:rgba(51,51,51,1);
        }
        .icon-block{
          font-size:12px;
          font-weight:400;
          color:rgba(153,153,153,1);
          display: flex;
          align-items: center;
        }
      }
  }
</style>